<!--
 * @Author: Betty
 * @Date: 2020-12-13 17:35:53
 * @LastEditors: Betty
 * @LastEditTime: 2020-12-20 16:40:00
 * @Description: Loader进度条组件
-->
<template>
  <!-- 最外层用<teleport>来包裹，因为要渲染到另一个地方 -->
  <teleport to="#back">
    <!-- 组件的根元素是遮罩层，加上了flex相关的一系列class -->
    <div :style="{ backgroundColor: background || '' }" class="d-flex justify-content-center align-items-center h-100 w-100 loading-container">
      <!-- 里层，loading内容 -->
      <div class="loading-content">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">{{ text || 'Loading...' }}</span>
        </div>
        <!-- 这里显示提示文字 -->
        <p v-if="text" class="text-primary small">{{ text }}</p>
      </div>
    </div>
  </teleport>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
import useDOMCreate from '../hooks/useDOMCreate'
export default defineComponent({
  name: 'Loader',
  props: {
    // 提示文本
    text: {
      type: String
    },
    // 遮罩层背景色
    background: {
      type: String
    }
  },
  setup() {
    // 在setup调用时，也就是在created之前，创建好id为back的div，加到body，让这个组件渲染进去
    useDOMCreate('back')
    return {}
  }
})
</script>

<style scoped>
/* 这个是遮罩层，固定定位，宽高占满整个屏幕，背景色默认为白色半透明 */
.loading-container {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
}

.loading-container > .loading-content {
  text-align: center;
}
</style>
